<template>
	<view style="height: calc(100vh - 150rpx); overflow: auto">
		<!--  发票开具 -->
		<view v-if="isEdit">
			<view class="billItem" v-for="b in list" :key="b.id">
				<view class="name">
					{{ b.name }}
				</view>
				<view>{{b.rzInfo}}</view>
				<view>{{b.bedInfo}}</view>
				<view class="poPrice">¥{{b.total}}</view>				
			</view>
		</view>
		<view class="whiteItem">
			<uni-forms>
				<uni-forms-item label="开票金额">
					<text class="bigprice">¥{{totalMoney}}</text>
				</uni-forms-item>
				<uni-forms-item label="发票形式"  required>
					<uni-data-checkbox @change="changeinvoiceForm" v-model="form.invoiceForm" :localdata="type" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" v-if="form.invoiceForm=='1'"  required>
					<uni-easyinput type="email" @blur="checkEmail" v-model="email"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="邮寄地址"  v-else  required>
					<button plain type="primary" size="mini" v-if="addressList.length==0" @click="goEditAddress"> +添加地址</button>
					<view v-else class="flexCenter">
						<view>
							<view class="bigSize">{{nowAddress.contact}} {{nowAddress.phone}}</view>
							<view class="smallSize">{{nowAddress.addName}}</view>
						</view>
						<view @click="popAddressList" class="editbtn"> 切换 </view>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="发票类型"  required>
					<uni-data-checkbox v-model="form.invoiceType" :localdata="type2" />
				</uni-forms-item>
				<uni-forms-item label="发票抬头"  required>
					<uni-easyinput type="text" v-model="form.invoiceTitle"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="税号"  required v-if="form.invoiceType=='0'">
					<uni-easyinput type="text" v-model="form.invoiceTfn"></uni-easyinput>
				</uni-forms-item>
				<view v-if="form.invoiceForm=='3'&&form.invoiceType=='0'">
					<uni-forms-item label="地址"  required>
						<uni-easyinput type="text" v-model="form.invoiceAddress"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label=" 电话"  required>
						<uni-easyinput type="text" v-model="form.invoicePhone"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="开户行"  required>
						<uni-easyinput type="text" v-model="form.invoiceBank"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label=" 账户">
						<uni-easyinput type="text" v-model="form.invoiceAccount"></uni-easyinput>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		
		<view v-if="remarks" class="remarksbox">
			<view class="h3"> 发票开具说明</view>
			{{remarks}}
		</view>
	</view>
	
	<view>
		<button style="width: 80%;margin: auto;" class="btn btn1" @click="submit"> 提交 </button>
	</view>
	<uni-popup ref="popupList" type="bottom" background-color="#fff" height="70vh">
		<uni-swipe-action>
			<uni-swipe-action-item v-for="a in addressList" :key="a.id" :right-options="optionsDel" @click="delThisAddress(a)">
				
				<uni-list-item showArrow clickable @click="chooseThisAddress(a)">
					<template v-slot:body>
						<view class="bigSize">{{a.contact}}  {{a.phone}}</view>
						<view class="smallSize">{{a.addName}}</view>
					</template>
				</uni-list-item>
			</uni-swipe-action-item>
		</uni-swipe-action>
	
		<view class="pd20">
			<button plain type="primary" @click="goEditAddress"> +添加地址</button>
		</view>
	</uni-popup>
	
	<uni-popup ref="popup" type="bottom" background-color="#fff">
		<view class="popBody">
			<view class="centerfont"> 添加地址 </view>
		<uni-forms :modelValue="addressForm">
			<uni-forms-item label="地区" required>
				<uni-data-picker  class="fixUniFormItemStyle"
					@change="onchangeRegionId" @nodeclick="onnodeclick"
					:localdata="regionsList"
					popup-title="省市区"
				></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label=" 详细地址" required>
				<uni-easyinput type="textarea" v-model="addressForm.address"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label=" 联系人" required>
				<uni-easyinput type="text" v-model="addressForm.contact" ></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label=" 联系电话" required>
				<uni-easyinput type="number" v-model="addressForm.phone"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>
			<view>
				<button style="width: 100%;" class="btn btn1" @click="saveAddress" type="default"> 提交</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import _ from 'lodash'
	
	import * as hotel from '@/common/hotel.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const app = getApp();
	const data = reactive({
		id: null,
		isEdit:false,
		form:{
			invoiceForm:'1',
			invoiceType:'0'
		},
		detail:{},
		type:[{value:'1',text:' 电子发票'},{value:'2',text:'纸质普票'},{value:'3',text:'纸质专票'}],
		type2:[{value:'0',text:' 企业'},{value:'1',text:'个人非企业'}],
		totalMoney:0,
		list:[],
		invoiceMsg:{},
		remarks:'',
		addressForm:{},
		regionsList:[],
		addressList:[],
		regionArr:[],
		popup:null,
		popupList:null,
		nowAddress:{},
		email:'',
		optionsDel:[{text: '删除',style: {backgroundColor: 'rgb(255,58,49)'}}]
	})
	const {
		id,form,detail,type,type2,totalMoney,list,isEdit,invoiceMsg,remarks,addressForm,regionsList,regionArr,
		popup,popupList,addressList,nowAddress,optionsDel,email
	} = toRefs(data);
	let orders
	let activeId
	let invoiceId
	let kpType
	onLoad(option => {
		console.log(option)
		if (option.id) {
			id.value = option.id
		}
		
		type.value = _.filter(type.value,(v)=>{			
			return option.kpType.indexOf(v.value)>-1
		})

		activeId = option.activeId
		if(option.orders){
			orders = option.orders
		}
		if(option.totalMoney){
			totalMoney.value = option.totalMoney
		}
		if(option.remarks){
			remarks.value = option.remarks
		}
		getAddressList()
		if(option.isEdit){
			isEdit.value = option.isEdit
			invoiceId = option.invoiceId
			getList()
		}
	})
	function getRegionsList() {
		hotel.regionsList().then(res => {
			regionsList.value = res.data;
		});
	}
function getList() {
	hotel.getInvoiceDetailBills(invoiceId).then(res => {
		// 订单
		list.value = res.rows;
	});
	hotel.getInvoiceDetail(invoiceId).then(res => {
		form.value = res.data;
		totalMoney.value = form.value.total
		if(form.value.invoiceForm =='1'){
			email.value = form.value.address
		}
		getAddressList()
	});
}
function getAddressList(){
	hotel.addressList().then(res=>{
		addressList.value = res.rows
		if(!nowAddress.value||addressList.value.length==1){
			nowAddress.value = addressList.value[0]
		}
		if(form.value.invoiceForm!='1'){
			for(var a of addressList.value){
				if(a.id == form.value.address){
					nowAddress.value = a
				}
			}
		}
	})
}
function chooseThisAddress(a){
	nowAddress.value = a
	popupList.value.close()
}
function checkEmail(){
	if(email.value){
		const reg = RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/).test(email.value)
		if(reg){
			return true
		} else {
			uni.showToast({
				title: '请输入正确的邮箱',
				icon: 'none'
			})
			email.value = ''
		}
	}
}

	
	function submit(){
		form.value.total = totalMoney.value
		form.value.activeId = activeId
		if(form.value.invoiceForm!='1'){
			if(nowAddress.value?.id){
				form.value.address = nowAddress.value.id
			} else {
				uni.showToast({
					title: '请选择邮寄地址',
					icon: 'none'
				})
				return
			}
		}
		if(form.value.invoiceForm=='1'){
			if(email.value){
				form.value.address = email.value
			} else {
				uni.showToast({
					title: '请完善邮箱信息',
					icon: 'none'
				})
				return
			}
		}
		// if(!form.value.address){
		// 	uni.showToast({
		// 		title: '请完善地址信息',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		if(!form.value.invoiceTitle){
			uni.showToast({
				title: '请完善发票抬头 ',
				icon: 'none'
			})
			return
		}
		if(!form.value.invoiceTfn&&form.value.invoiceType=='0'){
			uni.showToast({
				title: '请完善税号 ',
				icon: 'none'
			})
			return
		}
		if(form.value.invoiceForm=='3'&&form.value.invoiceType=='0'){
			if(!form.value.invoiceAddress){
				uni.showToast({
					title: '请完善专票地址',
					icon: 'none'
				})
				return
			}
			if(!form.value.invoicePhone){
				uni.showToast({
					title: '请完善专票电话',
					icon: 'none'
				})
				return
			}
			if(!form.value.invoiceBank){
				uni.showToast({
					title: '请完善开户行信息',
					icon: 'none'
				})
				return
			}
		}
		
		if(isEdit.value){
			hotel.editInvoice(form.value).then(res=>{
				uni.showModal({
					title: '提示',
					content: ' 申请成功 ',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			})
		}else{
			form.value.orders = orders
			hotel.submitInvoice(form.value).then(res=>{
				uni.showModal({
					title: '提示',
					content: ' 申请成功 ',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			})
		}


	}
	function onchangeRegionId(e){
		regionArr.value = e.detail.value 
	}
	function onnodeclick(e){
		// console.log('nodeclick',e)
	}
	function goEditAddress(){
		getRegionsList()
		addressForm.value = {}
		popup.value.open()
	}
	function popAddressList(){
		popupList.value.open()
	}
	function saveAddress(){
		if(regionArr.value.length==0){
			uni.showToast({
				title: ' 请选择省市区 ',
				icon: 'none'
			});
			return
		}
		if(!addressForm.value.contact){
			uni.showToast({
				title: ' 请填写联系人 ',
				icon: 'none'
			});
			return
		}
		if(!addressForm.value.phone){
			uni.showToast({
				title: ' 请填写联系电话 ',
				icon: 'none'
			});
			return
		}
		if(!addressForm.value.address){
			uni.showToast({
				title: ' 请填写详细地址 ',
				icon: 'none'
			});
			return
		}
		addressForm.value.province = regionArr.value[0].value
		addressForm.value.city = regionArr.value[1]?.value||''
		addressForm.value.area = regionArr.value[2]?.value||''
		hotel.addAddress(addressForm.value).then(res=>{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			popup.value.close()
			getAddressList()
		})
	}
	function delThisAddress(a){
		hotel.delAddress(a.id).then(res=>{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			getAddressList()
		})
	}
	function changeinvoiceForm(e){
		if(e.detail.value == '1'){
			form.value.address = email.value||''
		} else {
			nowAddress.value = addressList.value[0]
		}
		
	}
</script>

<style lang="scss" scoped>
	.billItem{margin: 30rpx auto 0;position: relative;padding: 30rpx 0 1rpx;}
	.poPrice{position:absolute;right: 30rpx;bottom: 0;font-size: 30rpx;color: #1EC886;
		padding: 0;
	}

	.whiteItem {
		width: 700rpx;
		box-sizing: border-box;
		margin: 26rpx auto 0;
		padding: 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
		border-radius: 15rpx;

		.tt {
			line-height: 1;
			border-left: 4rpx solid #1EC886;
			color: #1EC886;
			padding-left: 14rpx;
		}

		.m1 {
			width: 314rpx;
			height: 225rpx;
		}

		.m2 {
			width: 315rpx;
			height: 103rpx;
			float: right;
		}

		.m3 {
			width: 315rpx;
			height: 103rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	.qbox {
		height: 225rpx;
		position: relative;
		width: 100%;
	}

	.slot-image {
		width: 60rpx;
		position: relative;
		top: -8rpx;
		height: 60rpx;
		margin-right: 30rpx;
	}
	.bigprice{font-size: 40rpx;    line-height: 2;}
	.editbtn{color: #1EC886;}
	.bigSize{font-size: 32rpx;margin-bottom: 10rpx;}
	.smallSize{font-size: 26rpx;color: #999;}
	.flexCenter{display: flex;width: 100%;align-items: center;justify-content: space-between;
	background: #f4f4f4;padding: 20rpx;box-sizing: border-box;}
	.remarksbox{padding: 30rpx;margin: 60rpx 0;color: #aaa;
		.h3{font-size: 30rpx;margin: 0 0 20rpx;}font-size: 24rpx;
	}
	.pd20{    padding: 20rpx;}
	.popBody{height: 50vh;padding: 30rpx;overflow: auto;}
	.centerfont{text-align: center;margin-bottom: 30rpx;}
</style>